<template>
  <div id="app">
    <Drawer width="200px;" :show="drawer_state" show-mode="push">
      <drawerContent @on-login="handleLogin" slot="drawer"></drawerContent>
      <ViewBox ref="viewBox" body-padding-bottom="0" body-padding-top="50px">
        <mheader slot="header"></mheader>
        <transition :name="transitionName">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" style="height: 100vh;width: 100%;overflow: hidden"></router-view>
          </keep-alive>
        </transition>
        <transition :name="transitionName">
          <router-view v-if="!$route.meta.keepAlive" style="height: 100vh;width: 100%;overflow: hidden">
            <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
          </router-view>
        </transition>
      </ViewBox>
    </Drawer>
    <login ref="login"></login>
    <!-- 公共loading -->
    <loading :show="common_loading"></loading>
  </div>
</template>
<script>
  import {mapGetters, mapMutations} from "vuex";
  import {Drawer, ViewBox, Loading} from 'vux'
  import mheader from "components/header"
  import login from "components/login"
  import drawerContent from "components/drawerContent"
  import $ from "jquery"
  import Bus from "common/js/bus"
  import Store from "store2"
  import moment from "moment"

  export default {
    name: 'app',
    components: {
      login,
      Drawer,
      ViewBox,
      drawerContent,
      Loading,
      mheader
    },
    data() {
      return {
        drawer: {
          state: false
        },
        transitionName: "pagefade"
      }
    },
    mounted() {
      //关闭初始页面loading;
      $("#app-loadingBox").hide();
      this.drawerClose();
      this.initBus();

    },
    methods: {
      drawerClose() {
        $(this.$el).on("click", '.drawer-mask', () => {
          this.setDrawerState(false);
          return false
        })
      },
      //初始化bus事件
      initBus() {
        // 事件loading
        Bus.$on("loading-on", () => {
          this.setCommonLoading(true)
        });
        Bus.$on("loading-off", () => {
          this.setCommonLoading(false)
        })
      },
      handleLogin(){
          this.setDrawerState(false);
          this.$refs.login.loginShow()
      },
      ...mapMutations({
        "setDrawerState": "SET_DRAWER_STATE",
        "setCommonLoading": "SET_COMMON_LOADING"
      })
    },
    computed: {
      ...mapGetters(['drawer_state', 'common_loading'])
    },
    watch: {
      '$route'(to, from) {
        const toDepth = to.path.split('/').length;
        const fromDepth = from.path.split('/').length;
        this.transitionName = toDepth > fromDepth ? 'pagefadeOut' : 'pagefade'
      }
    }
  }
</script>
<style lang="less">
  @import "common/style/style-index";
</style>
